<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style type="text/css">
			.root {
				width: 1200px;
				height: 500px;
				display: flex;
				/*background-color: #2E8B57;*/
				justify-content: space-between;
			}
			
			.one {
				width: 180px;
				height: 200px;
				/*background-color: #0367A6;*/
				position: relative;
			}
			
			.one p {
				text-align: center;
				/*background-color: #800080*/
			}
			
			.one img {
				width: 180px;
				height: 250px;
			}
			
			.two {
				width: 180px;
				height: 200px;
				position: absolute;
				left: 180px;
				top: 0;
				background-color: #DAA520;
				z-index: 10;
				display: none;
			}
			
			.two p {
				text-align: left;
				/*background-color: #F5DEB3;*/
			}
		</style>
	</head>

	<body>
		<div class="root">

		</div>
	</body>

</html>
<script src="../jq第一天/jquery-3.4.1.min.js"></script>
<script>
	var request;
	if(window.XMLHttpRequest) {
		request = new XMLHttpRequest();
	} else {
		request = new ActiveXObject("Microsot.XMLHttp");
	}
	request.open("GET", "douban.json", true);
	request.onreadystatechange = function() {
		if(request.status == 200 && request.readyState == 4) {
			var a = request.responseText;
			parseData(a);
		}
	}
	request.send();

	function parseData(data) {
		var obj = JSON.parse(data);
		dataArr = obj["subjects"];
		for(var i in dataArr) { 
			//创建元素
			var  one  =  document.createElement("div");
			var  two  =  document.createElement("div");
			var img = document.createElement("img");
			var p = document.createElement("p")
			var p1 = document.createElement("p")
			var p2 = document.createElement("p")
			var p3 = document.createElement("p")
			var p4 = document.createElement("p")
			var p5 = document.createElement("p")
			var p6 = document.createElement("p")
			$(".root").append($(one));
			$(one).append($(img));
			$(one).append($(p));
			$(one).append($(two));
			$(two).append(p1);
			$(two).append(p2);
			$(two).append(p3);
			$(two).append(p4);
			$(two).append(p5);
			$(two).append(p6);
			$(one).addClass("one");
			$(two).addClass("two");
			var casts;

			//找到电影名
			var dy = dataArr[i];
			$(p).html(dy["title"]);
			$(p1).html(dy["title"]);
			//跳转详细链接
			var lian=dy["alt"];
			console.log(lian);
			//找到图片
			for(var a in dy) {
				//图片
				var imgurl = dy["images"];
				var imgurl1 = imgurl["small"];
				img.src = imgurl1;
				//导演
				var directors = dy["directors"][0];
				var name = directors["name"];
				$(p3).html("导演  " + name);
				//主演
				var casts = dy["casts"];

			}
			for(var b in casts) {
				var yan = casts[b];
				var name2 = yan["name"];
				console.log(name2);
				$(p4).html($(p4).html() + name2);
			}
			$(p4).html("主演  " + $(p4).html());
			//时间
			console.log();
			//国家
			$(p2).html(dy["durations"][0])
			//导演

			$(one).hover(function() {
				$(this).find(".two").css({
					display: "block",
				})
			}, function() {$(this).find(".two").css({
					display: "none",
				}) })

		}
	}
	//
	console.log($(".one"))
</script>